<template>
	<view>
		<scroll-view v-bind="$attrs" id="scrollWrap" :style="`height: ${scollHeight}`" :scroll-y="scrollView" :refresher-triggered="dataRefresherTriggered" :refresher-enabled="isRefresh" 
		@scrolltolower="scrolltolower"
		@refresherpulling="refresherpulling"
		@refresherrefresh="refresherrefresh"
		@refresherrestore="refresherrestore"
		@refresherabort="refresherabort"
		 class="scroll-list" >
			<view class="list">
				<template>
					<slot :item="item" :index="index" v-for="item, index in list"></slot>
				</template>
			</view>
			<view :class="['cu-load', isLoadEnd ? 'over' : 'loading'].concat(loadCls)" v-show="isPager && toBottom"></view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			apiMethod: {
				type: Function,
				default() {
					return new Promise(() => {
						
					})
				}
			},
			apiParams: {
				type: Object,
				default() {
					return {}
				}
			},
			// 是否开启下拉刷新
			isRefresh: {
				type: Boolean,
				default: true
			},
			scrollView: {
				type: Boolean,
				default() {
					return true
				}
			}, // 是否scroll-view滚动
			showLoading: {
				type: Boolean,
				default () {
					return true
				}
			}, // 是否展示加载中
			loadCls: {
				type: String | Array,
				default () {
					return []
				}
			},
			isPager: {
				type: Boolean,
				default () {
					return true // 是否支持分页
				}
			}, // 是否支持分页
			pageNum: {
				type: Number,
				default () {
					return 10 // 分页条数
				}
			},
		},
		data() {
			return {
				list: [],
				toBottom: false, // 是否滚动到底部
				scollHeight: 'auto', // 滚动容器高度
				isLoad: false, // 是否正在加载
				isLoadEnd: false, // 是否加载完成
				curPage: 1, // 当前页数（只有isPager才有效）
				dataRefresherTriggered: this.refresherTriggered
			}
		},
		created() {
			if (this.showLoading) {
				uni.showLoading({
					title: '加载中...'
				})
			}
			this.getList()
		},
		mounted() {
			// 动态设置scrollheight，如果是局部滚动就需要设置
			if (this.scrollView) {
				const that = this
				uni.getSystemInfo({
					success: function(res) {
						const winH = res.windowHeight
						uni.createSelectorQuery().select(`#scrollWrap`).boundingClientRect(function(data) {
							that.scollHeight = winH - data.top + 'px'
						})
						.exec();
					},
				});
			}
		},
		methods: {
			reachBottom() {
				if (this.isLoad || this.isLoadEnd) {return}
				this.toBottom = true
				this.curPage++
				this.getList()
			},
			scrolltolower() {
				// 如果分页，滚动加载
				if (this.isPager && this.scrollView) {
					this.reachBottom()
				}
			},
			// 刷新列表
			refresh() {
				this.list = []
				this.curPage = 1
				if (this.showLoading) {
					uni.showLoading({
						title: '加载中...'
					})
				}
				this.getList()
			},
			async getList() {
				if (!this.apiMethod) {
					return
				}
				this.isLoad = true
				
				if (this.isPager) {
					this.apiParams[uni.esConfig.page] = this.curPage
					this.apiParams[uni.esConfig.pageNum] = this.pageNum
				}
				
				let data = await this.apiMethod(this.apiParams)
				this.isLoad = false
				this.list = this.list.concat(data)
				if (data.length) {
					this.isLoadEnd = false
				} else {
					// 加载完成
					this.isLoadEnd = true
				}
				if (this.showLoading) {
					uni.hideLoading()
				}
			},
			refresherpulling() {
				this.$emit('refresherpulling')
			},
			async refresherrefresh() {
				console.log('开始触发下拉请求数据')
				this.isLoadEnd = false
				this.dataRefresherTriggered = true
				this.curPage = 1
				this.list = []
				await this.getList()
				console.log('获取完数据，重置状态')
				this.dataRefresherTriggered = false
				this.$emit('refresherrefresh')
			},
			refresherrestore() {
				this.$emit('refresherrestore')
			},
			refresherabort() {
				this.$emit('refresherabort	')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-list {
		height: 100%;
	}
</style>
